<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>道路门牌系统</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>

    <!--css-->
    <link rel="stylesheet" href="/css/ydui.css"/>
    <link rel="stylesheet" href="/css/demo.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
</head>
<body>
<section class="g-flexview">
    <header class="m-navbar"><a href="/" class="navbar-item"><i class="back-ico"></i></a>
        <div class="navbar-center"><span class="navbar-title">门牌信息</span></div>
    </header>
    <section class="g-scrollview">
        <div class="map-box">
            <!--百度地图容器-->
            <div style="height:250px;" id="dituContent"></div>
        </div>
        <!--    <div class="m-celltitle demo-small-pitch">基本信息</div>-->
        <div class="m-cell">
            <div class="cell-item">
                <div class="cell-left">门牌地址</div>
                <div class="cell-right" th:text="${saomaDTO.getDoorPlate().getPlateName()}">西安市新城区环城北路东段10号</div>
            </div>
            <div class="cell-item">
                <div class="cell-left">门牌经纬度</div>

                <div class="cell-right" id="lnglat"
                     th:text="${saomaDTO.getDoorPlate().getPointLat()}+','+${saomaDTO.getDoorPlate().getPointLng()}">

                    东经10、北纬60
                </div>


            </div>
        </div>
        <div th:if="${saomaDTO.getAnzhuangInfo()!=null}">
            <div class="m-celltitle demo-small-pitch">安装信息</div>
            <div class="m-cell">
                <div class="cell-item">
                    <div class="cell-left">安装人</div>
                    <div class="cell-right" th:text="${saomaDTO.getAnzhuangInfo().getAnzhuangzheName()}">张小娴</div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">安装时间</div>
                    <div class="cell-right"
                         th:text="${#dates.format(saomaDTO.getAnzhuangInfo().getAddTime(), 'yyyy-MM-dd')}">
                        2018-05-15 13:50
                    </div>
                </div>
                <div class="zpimglist">
                    <ul>
                        <li><img th:src="${saomaDTO.getAnzhuangInfo().getImgUrl()}" src="/images/menpai.jpg"></li>
                    </ul>
                </div>
            </div>
        </div>

        <div th:if="${!saomaDTO.getXunjianInfo().isEmpty()}">
            <div class="m-celltitle demo-small-pitch">巡检信息</div>
            <div class="m-cell" th:each="info,stat:${saomaDTO.getXunjianInfo()}">
                <div class="cell-item">
                    <div class="cell-left">巡检人</div>
                    <div class="cell-right" th:text="${info.getAnzhuangzheName()}">张小娴</div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">巡检时间</div>
                    <div class="cell-right"
                         th:text="${#dates.format(info.getAddTime(), 'yyyy-MM-dd HH:mm:ss')}">
                        2018-05-15 13:50
                    </div>
                </div>
                <div class="zpimglist">
                    <ul>
                        <li><img th:src="${info.getImgUrl()}" src="/images/menpai.jpg"></li>
                    </ul>
                </div>
            </div>
        </div>


        <div th:if="${saomaDTO.getWeihuInfo()!=null}">
            <div class="m-celltitle demo-small-pitch">维护信息</div>
            <div class="m-cell" th:if="${saomaDTO.getWeihuInfo()!=null}">
                <div class="cell-item">
                    <div class="cell-left">维护问题</div>
                    <div class="cell-right" th:text="${saomaDTO.getWeihuInfo().getRemark()}">门牌表面损坏</div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">维护时间</div>
                    <div class="cell-right" th:text="${saomaDTO.getWeihuInfo().getAddTime()}">2018-05-15 13:50</div>
                </div>
                <div class="zpimglist">
                    <ul>
                        <li><img th:src="${saomaDTO.getWeihuInfo().getImgUrl()}" src="/images/menpai.jpg"></li>
                    </ul>
                </div>
                <!--      <div class="cell-item" style="height: 232px;padding-left: 0;"><img src="../images/menpai.jpg" width="100%"></div>-->
            </div>
        </div>
    </section>
</section>

<!--引用百度地图API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=79ztjfis0XStrHNpEpezr2za3iQNbW9f"></script>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap() {
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
        addPolyline();//向地图中添加线
    }

    //创建地图函数：
    function createMap() {
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(108.953333, 34.266799);//定义一个中心点坐标
        map.centerAndZoom(point, 17);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
        if (document.getElementById("lnglat").innerText != "" && document.getElementById("lnglat").innerText != "&nbsp;,&nbsp;") {
            map.clearOverlays();
            var arr = new Array;
            arr = document.getElementById("lnglat").value.split(",");
            var new_point = new BMap.Point(arr[0], arr[1]);
            var marker = new BMap.Marker(new_point);  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中
            map.panTo(new_point);
            document.getElementById("lnglat").innerText = "108.95346,34.265725";

        } else {
            map.clearOverlays();
            var new_point = new BMap.Point(108.95346, 34.265725);
            var marker = new BMap.Marker(new_point);  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中
            map.panTo(new_point);
            document.getElementById("lnglat").innerText = "108.95346,34.265725";
        }
        //单击获取点击的经纬度
        map.addEventListener("click", function (e) {
            map.clearOverlays();
            var new_point = new BMap.Point(e.point.lng, e.point.lat);
            var marker = new BMap.Marker(new_point);  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中
            map.panTo(new_point);

            document.getElementById("lnglat").innerText = e.point.lng + "," + e.point.lat;


        });

    }

    //地图事件设置函数：
    function setMapEvent() {
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl() {
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 0});
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);
    }

    //标注点数组
    var markerArr = [{
        title: "西安钟楼",
        content: "我的备注",
        point: "108.953378|34.265815",
        isOpen: 0,
        icon: {w: 23, h: 25, l: 46, t: 21, x: 9, lb: 12}
    }
    ];

    //创建marker
    function addMarker() {
        for (var i = 0; i < markerArr.length; i++) {
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0, p1);
            var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point, {icon: iconImg});
            var iw = createInfoWindow(i);
            var label = new BMap.Label(json.title, {"offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20)});
            marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                borderColor: "#808080",
                color: "#333",
                cursor: "pointer"
            });

            (function () {
                var index = i;
                var _iw = createInfoWindow(i);
                var _marker = marker;
                _marker.addEventListener("click", function () {
                    this.openInfoWindow(_iw);
                });
                _iw.addEventListener("open", function () {
                    _marker.getLabel().hide();
                })
                _iw.addEventListener("close", function () {
                    _marker.getLabel().show();
                })
                label.addEventListener("click", function () {
                    _marker.openInfoWindow(_iw);
                })
                if (!!json.isOpen) {
                    label.hide();
                    _marker.openInfoWindow(_iw);
                }
            })()
        }
    }

    //创建InfoWindow
    function createInfoWindow(i) {
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");
        return iw;
    }

    //创建一个Icon
    function createIcon(json) {
        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w, json.h), {
            imageOffset: new BMap.Size(-json.l, -json.t),
            infoWindowOffset: new BMap.Size(json.lb + 5, 1),
            offset: new BMap.Size(json.x, json.h)
        })
        return icon;
    }

    //标注线数组
    var plPoints = [{
        style: "solid",
        weight: 4,
        color: "#f00",
        opacity: 0.6,
        points: ["108.946892|34.265636", "108.958265|34.265815", "108.958408|34.265845"]
    }
    ];

    //向地图中添加线函数
    function addPolyline() {
        for (var i = 0; i < plPoints.length; i++) {
            var json = plPoints[i];
            var points = [];
            for (var j = 0; j < json.points.length; j++) {
                var p1 = json.points[j].split("|")[0];
                var p2 = json.points[j].split("|")[1];
                points.push(new BMap.Point(p1, p2));
            }
            var line = new BMap.Polyline(points, {
                strokeStyle: json.style,
                strokeWeight: json.weight,
                strokeColor: json.color,
                strokeOpacity: json.opacity
            });
            map.addOverlay(line);
        }
    }

    initMap();//创建和初始化地图
</script>

<!--js-->
<script src="/js/jquery.min.js"></script>
<script src="/js/ydui.js"></script>
<script src="/js/ydui.flexible.js"></script>
</body>
</html>
